<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        button {
            background: transparent;
            border: none;
            cursor: pointer;
            outline: none;
            font-size: 40px;
        }
        
        body {
            background: #456990;
            font-size: 16px;
            line-height: 1.5;
            font-family: "微软雅黑";
            color: #fff;
        }
        
        .timeline {
            position: relative;
            height: 960px;
            overflow-y: hidden;
        }
        
        .arrows {
            position: fixed;
            top: 500px;
            right: 600px;
        }
        
        .timeline ol {
            font-size: 0;
            width: 100vw;
            padding: 100px 0;
            transition: all 1s;
        }
        
        .timeline ol li {
            margin: 0 1300px 0 600px;
            position: relative;
            list-style-type: none;
            width: 3px;
            height: 160px;
            background: #fff;
        }
        
        .timeline ol li:last-child {
            height: 280px;
        }
        
        .timeline ol li {
            margin-bottom: 13px;
        }
        
        .timeline ol li:last-child::after {
            content: "";
            position: absolute;
            left: -4.5px;
            bottom: 110px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #f45b69;
        }
        
        .timeline ol li:not(:last-child)::after {
            content: "";
            position: absolute;
            left: -4.5px;
            bottom: -13px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #f45b69;
        }
        
        .timeline ol li div {
            position: absolute;
            top: 110px;
            left: 30px;
            width: 280px;
            padding: 15px;
            font-size: 1rem;
            white-space: normal;
            color: black;
            background: white;
        }
        
        .timeline ol li div::before {
            position: absolute;
            content: "";
            top: 100%;
            left: 0;
            border-style: solid;
        }
        
        .timeline ol li:nth-child(odd) div {
            left: -30px;
            transform: translateX(-100%);
        }
        
        .timeline ol li:nth-child(odd) div::before {
            left: 280px;
            top: 38px;
            border-width: 8px 8px 8px 8px;
            border-color: transparent transparent white white;
        }
        
        .timeline ol li:nth-child(even) div::before {
            top: 38px;
            left: -16px;
            border-width: 8px 8px 8px 8px;
            border-color: transparent white white transparent;
        }
    </style>
</head>

<body>
    <p></p>
    <section class="timeline">
        <ol>
            <li>
                <div>
                    <time>1990</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1991</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1992</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1993</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1994</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1995</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>

            <li>
                <div>
                    <time>1996</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1997</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1997</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1990</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1991</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
            <li>
                <div>
                    <time>1992</time> 不要懒惰了，你废了，渣人;
                </div>
            </li>
        </ol>
        <div class="arrows">
            <p>
                <button class="arrow arrow_upper arrow__prev disabled">&uarr;</button>
            </p>
            <br><br>
            <p>
                <button class="arrow arrow_down arrow__next">&darr;</button>
            </p>
        </div>
    </section>

    <script>
        var timeline = document.querySelector(".timeline ol");
        var elH = document.querySelectorAll(".timeline ol  li>div");
        var arrows = document.querySelectorAll(".timeline .arrows .arrow");
        var arrowPrev = document.querySelector(".timeline .arrows .arrow__prev");
        var arrowNext = document.querySelector(".timeline .arrows .arrow__next");
        var firstItem = document.querySelector(".timeline li:first-child");
        var lastItem = document.querySelector(".timeline li:last-child");
        var xScrolling = 280;


        window.addEventListener("load", init);


        var init = function() {
            setEqualHeights(elH);
            animateTl(xScrolling, arrows, timeline)
        }

        var setEqualHeights = function(el) {
            var counter = 0;
            for (var i = 0; i < el.length; i++) {
                var singleHeight = el[i].offsetWidth;
                if (counter < singleHeight) {
                    counter = singleHeight;
                }
            }
            for (var i = 0; i < el.length; i++) {
                el[i].style.width = counter + "px";
            }
        }

        var animateTl = function(scrolling, el, tl) {
            var counter = 0;
            for (var i = 0; i < el.length; i++) {
                el[i].addEventListener("click", function() {
                    var sign = (this.classList.contains("arrow__prev")) ? "" : "-";
                    if (counter === 0) {
                        tl.style.transform = 'translateY(-' + scrolling + 'px)';
                    } else {
                        var tlStyle = window.getComputedStyle(tl); //样式
                        console.log(tlStyle);
                        var transformStyle = tlStyle.getPropertyValue("-wekit-transform") || tlStyle.getPropertyValue("transform");
                        console.log(transformStyle);
                        var value = parseInt(transformStyle.split(",")[4]) + parseInt(sign + scrolling);
                        tl.style.transform = 'translateY(' + value + 'px)';
                    }

                    setTimeout(function() {
                        arrowPrev.disabled = false;
                        arrowNext.disabled = false;

                    }, 1100);

                    counter++;
                })
            }
        }

        init();
    </script>
</body>

</html>